/* ---------------------------------------- 默认css针对16:9标准比例屏幕微信----------------------------------------*/
html{width: 100%;height: 100%;;}
body{width: 100%;height: 100%;;}
html,body{
  transform:translate3d(0,0,0);overflow:hidden;background: #ff3449;
}
article{
  background: #ff3449;
}
section{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:3;background: #ff3449;;}
aside{position:fixed;top:0;left:0;width:100%;height:100%;z-index:19;background-color:rgba(0,0,0,0.85);}
.hide{display: none;}
input{user-select: text;-webkit-user-select:text;}
/*  */

.panel{width: 6.90rem;height: 11.66rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: url('./images/common/panel.png') no-repeat;background-size: 100% auto;-webkit-user-select:none;}
.panel .border{width: 6.62rem;height: 11.39rem;position: absolute;top: 0;left: 0;-webkit-user-select:none;}

.screen159 .panel{transform: translate(-50%,-50%) scale(.89);}

/* p1 */
.p1 img{width: 100%;height: auto;;}
.p1{background: #cd3333;}
.p1 .bg1{width: 100%;height:4.24rem;background: url('./images/p1/images/bg_01.jpg') no-repeat;background-size: 100% auto;position: absolute;top: 0;left: 0;}
.p1 .bg2{width: 100%;height: 9.74rem;background: url('./images/p1/images/bg_02.jpg') no-repeat;background-size: 100% auto;position: absolute;bottom: 0;left: 0;}



.p1 .start{width: 4.87rem;height: 6.67rem;position: absolute;top: 2.13rem;left: 50%;transform: translateX(-50%);background: url('./images/p1/tips.png') no-repeat;background-size: 100% auto;}
.p1 .start .btn{width: 2.25rem;height: .74rem;position: absolute;left: 50%;transform: translateX(-50%);top: 5.23rem;;}

/* p2 */
.p2 .logo{width: 4.04rem;height: 2.14rem;background: url('./images/p2/logo.png') no-repeat;background-size: 100% auto;margin: auto;margin-top: 1.3rem;}
.p2 .input{width: 5.50rem;height: .72rem;margin: auto;}
.p2 .input input{border: none;outline: none;background: transparent;margin-left: 1.1rem;height: .4rem;width: 4rem;margin-top: .1rem;font-size: .28rem;color: #fff;;}
.p2 .input.input_name{background: url('./images/p2/input_name.png') no-repeat;background-size: 100% auto;margin-top: 1.34rem;;}
.p2 .input.input_phone{background: url('./images/p2/input_phone.png') no-repeat;background-size: 100% auto;margin-top: .32rem;;}
.p2 .register{width: 2.25rem;height: .74rem;background: url('./images/p2/register.png') no-repeat;background-size: 100% auto;margin: auto;margin-top: 1.02rem;;}


/* p3 */
.p3 img{width: 100%;height: auto;}
.p3 .logo{width: 1.52rem;height:.3rem;background: url('./images/p3/logo.png') no-repeat;background-size: 100% auto;margin: auto;margin-top: .5rem;}
.p3 .btn.next{width: 1.38rem;height: .57rem;position: absolute;left: 50%;transform: translateX(-50%);bottom: 0.1rem;;background: url('./images/p3/next.png') no-repeat;background-size: 100% auto;z-index: 100;;}
.p3 .btn.sure{width: 1.38rem;height: .57rem;position: absolute;left: 50%;transform: translateX(-50%);bottom: 0.1rem;;background: url('./images/p3/sure.png') no-repeat;background-size: 100% auto;z-index: 100;;}
.p3 .hebg{width: 5.76rem;height: 10.25rem;position: absolute;left:0;right: 0;margin: auto;top: .25rem;overflow: hidden;;}
.p3 .hebgmask{width: 5.87rem;height: 10.38rem;background: url('./images/p3/bgborder.png') no-repeat;background-size: 100% auto;position: absolute;left: 50%;transform: translateX(-50%);top: .17rem;z-index: 99;pointer-events: none;}
.p3 .heMain{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}


.p3 .heMain .helogo{width: 1.68rem;height: .3rem;position: absolute;left: 0;right: 0;margin: auto;top: .4rem;z-index: 99999999;}

.p3 .hebg .hebgPic{position: absolute;top: 0;left: 0;z-index: 1;width: 5.76rem;height: 10.25rem;}
.p3 .hebg .bigPerson{width: 1.8rem;height: 5rem;position: absolute;top: 3rem;left:0rem;z-index: 2;}
.p3 .hebg .bigPerson img{position: absolute;top: 0rem;left: 0;right: 0;margin: auto;z-index: 2;border: 1px dashed transparent;}
.p3 .hebg .bigPerson.active img{border: 1px dashed #fff;border-radius: 2px;;}
.p3 .hebg .bigPerson i{width: .4rem;height: .4rem;;background: url('./images/p3/reducer.png') no-repeat;background-size: .22rem .22rem;background-position: center center;position: absolute;top: 0;right: 0;z-index: 10;}

.p3 .hebg .slogan{width: 4.6rem;height: .6rem;z-index: 4;position: absolute;top: 3rem;left: .5rem;z-index: 2;border: 1px dashed transparent;}
.p3 .hebg .slogan.active{border: 1px dashed #fff;border-radius: .3rem;}
.p3 .hebg .slogan img{width: 100%;height: 100%;opacity: .6;position: absolute;top: 0;left: 0;}
.p3 .hebg .slogan input{border: none;outline: none;background: transparent;width:100%;height: .6rem;font-size: .28rem;color: #fff;box-sizing: border-box;padding: 0 .2rem;text-align: center;line-height: .6rem;position: fixed;top: 0;left: 0;font-weight: bold;}
.p3 .hebg .slogan i{width: .6rem;height: .6rem;;background: url('./images/p3/reducer.png') no-repeat;background-size: .22rem .22rem;background-position: center center;position: absolute;top: -.4rem;right: -.4rem;z-index: 10;;}

.p3 .hetool{width: 5.75rem;height:2rem;position: absolute;bottom: 0;left: 0;z-index: 30;;}

.p3 .hetool.scenery .scenerybg{display: flex;}
.p3 .hetool.person .personbg{display: flex;}
.p3 .hetool.sports .sportsbg{display: flex;}
.p3 .hetool.city .citybg{display: flex;}

.p3 .hetool1{width:100%;height: .98rem;position: absolute;bottom: 0;left: 0;background: #000;display: flex;align-items: center;}
.p3 .hetool1 .scenerybg{width: 100%;height: 100%;display: none;opacity: 0;transition: all .3s ease-in-out;}
.p3 .hetool1 .scenerybg div{width: 25%;height: 100%;display: flex;justify-content: center;align-items: center;}
.p3 .hetool1 .scenerybg div i{width: .7rem;height: .69rem;display: block;}
.p3 .hetool1 .scenerybg div i.forest{background: url('./images/p3/forest.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.forest.active{background: url('./images/p3/iforest.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.desert{background: url('./images/p3/desert.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.desert.active{background: url('./images/p3/idesert.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.star{background: url('./images/p3/star.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.star.active{background: url('./images/p3/istar.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.beach{background: url('./images/p3/beach.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.beach.active{background: url('./images/p3/ibeach.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.city{background: url('./images/p3/city.png') no-repeat;background-size: 100% 100%;}
.p3 .hetool1 .scenerybg div i.city.active{background: url('./images/p3/icity.png') no-repeat;background-size: 100% 100%;}

.p3 .hetool1 .personbg{width: 2.59rem;height: .86rem;margin: auto;display: none;opacity: 0;;transition: all .3s ease-in-out;;}
.p3 .hetool1 .personbg div{width: 33.3333%;height: auto;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.p3 .hetool1 .personbg .man i{background: url('./images/p3/man.png') no-repeat;background-size: 100% 100%;width: .71rem;height: .71rem;display: block;}
.p3 .hetool1 .personbg .man.active i{background: url('./images/p3/iman.png') no-repeat;background-size: 100% 100%;width: .81rem;height: .81rem;display: block;}
.p3 .hetool1 .personbg .woman i{background: url('./images/p3/woman.png') no-repeat;background-size: 100% 100%;width: .71rem;height: .71rem;display: block;}
.p3 .hetool1 .personbg .woman.active i{background: url('./images/p3/iwoman.png') no-repeat;background-size: 100% 100%;width: .81rem;height: .81rem;display: block;}
.p3 .hetool1 .personbg .pnum{align-items: flex-end;border: 1px solid #000;}
.p3 .hetool1 .personbg .pnum i{width: .6rem;height: .22rem;background: url('./images/p3/pnumbg.png') no-repeat;background-size: 100% 100%;margin-bottom: .1rem;}
.p3 .hetool1 .personbg .pnum i{display: flex;justify-content: center;align-items: center;font-size: .2rem;}

.p3 .hetool1 .personbg .man span.add{width: .3rem;height: .3rem;;background: url('./images/p3/add.png') no-repeat;background-size: .22rem .22rem;position: absolute;top: 0;left: 0;z-index: 2;opacity: 0;}
.p3 .hetool1 .personbg .man.active span.add{opacity: 1;}
.p3 .hetool1 .personbg .woman span.add{width: .3rem;height: .3rem;;background: url('./images/p3/add.png') no-repeat;background-size: .22rem .22rem;position: absolute;top: 0;left: 0;z-index: 2;opacity: 0;}
.p3 .hetool1 .personbg .woman.active span.add{opacity: 1;}


.p3 .hetool1 .sportsbg{width: 100%;height: 100%;display: none;opacity: 0;;transition: all .3s ease-in-out;;}
.p3 .hetool1 .sportsbg .swiper-container{width: 100%;height: 100%;;}
.p3 .hetool1 .sportsbg .swiper-wrapper{width: 100%;height: 100%;align-items: center;}
.p3 .hetool1 .sportsbg .swiper-slide{width: .7rem;height: .7rem;color: #fff;display: flex;justify-content: center;align-items: center;margin-left: .15rem;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide10{margin-right: .15rem;}

.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide1 i{background: url('./images/p3/sports1.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide2 i{background: url('./images/p3/sports2.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide3 i{background: url('./images/p3/sports3.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide4 i{background: url('./images/p3/sports4.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide5 i{background: url('./images/p3/sports5.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide6 i{background: url('./images/p3/sports6.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide7 i{background: url('./images/p3/sports7.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide8 i{background: url('./images/p3/sports8.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide9 i{background: url('./images/p3/sports9.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide10 i{background: url('./images/p3/sports10.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}

.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide1 i.active{background: url('./images/p3/isports1.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide2 i.active{background: url('./images/p3/isports2.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide3 i.active{background: url('./images/p3/isports3.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide4 i.active{background: url('./images/p3/isports4.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide5 i.active{background: url('./images/p3/isports5.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide6 i.active{background: url('./images/p3/isports6.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide7 i.active{background: url('./images/p3/isports7.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide8 i.active{background: url('./images/p3/isports8.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide9 i.active{background: url('./images/p3/isports9.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}
.p3 .hetool1 .sportsbg .swiper-slide.swiper-slide10 i.active{background: url('./images/p3/isports10.png') no-repeat; background-size: 100% 100%;display: block;width: 100%;height: 100%;}



.p3 .hetool1 .citybg{width: 100%;height: 100%;display: none;opacity: 0;;transition: all .3s ease-in-out;justify-content: center;align-items: center;}
.p3 .hetool1 .citybg .addSlogan{width: .69rem;height: .69rem;}
.p3 .hetool1 .citybg .addSlogan img{height: 100%;width: auto;}



.p3 .hetool2{width: 100%;height: auto;position: absolute;bottom: 0rem;left: 0;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;transition: all .3s ease-in-out;}

.p3 .hetool2 .hetool2bg{width: 100%;height: .98rem;display: flex;flex-shrink: 0;}
.p3 .hetool2 .hetool2bg .bg{width: 100%;height: 0.75rem;background: #403a37;position: absolute;left: 0;top: 50%;transform: translateY(-50%);opacity: 0;transition: all .3s ease-in-out;}

.p3 .direction{width: .46rem;height: .37rem;transition: all .3s ease-in-out;margin-right: 0.1rem;margin-bottom: 0.15rem;}
.p3 .direction{background: url('./images/p3/icon_down.png') no-repeat;background-size: 100% auto;transform: rotate(180deg);background-position:center center;;}


.p3 .hetool2icon{width: 25%;height: 100%;display: flex;justify-content: center;align-items: center;;}
.p3 .hetool2icon i{width: .53rem;height: .52rem;;}
.p3 .hetool2icon i.scenery{background: url('./images/p3/scenery.png') no-repeat;background-size: 100% auto;}
.p3 .hetool2icon i.scenery.active{background: url('./images/p3/iscenery.png') no-repeat;background-size: 100% auto;height: .6rem;}
.p3 .hetool2icon i.person{background: url('./images/p3/person.png') no-repeat;background-size: 100% auto;}
.p3 .hetool2icon i.person.active{background: url('./images/p3/iperson.png') no-repeat;background-size: 100% auto;height: .6rem;}
.p3 .hetool2icon i.sports{background: url('./images/p3/sports.png') no-repeat;background-size: 100% auto;}
.p3 .hetool2icon i.sports.active{background: url('./images/p3/isports.png') no-repeat;background-size: 100% auto;height: .6rem;}
.p3 .hetool2icon i.city{background: url('./images/p3/target.png') no-repeat;background-size: 100% auto;}
.p3 .hetool2icon i.city.active{background: url('./images/p3/itarget.png') no-repeat;background-size: 100% auto;height: .6rem;}



.p3 .hetool.active .hetool2{transform: translateY(-0.84rem);}
.p3 .hetool.active .direction{transform: rotate(0deg);transform-origin: center center}
.p3 .hetool.active .hetool2bg .bg{opacity: 1;}
.p3 .hetool.active .scenerybg {opacity: 1;}
.p3 .hetool.active .personbg {opacity: 1;}
.p3 .hetool.active .sportsbg {opacity: 1;}
.p3 .hetool.active .citybg {opacity: 1;}



.p3 .tips{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(0,0,0,.8);z-index: 40}
.p3 .tips .tipsContent{width: 4.54rem;height: 2.91rem;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
.p3 .tips .tipsContent .close{width: .52rem;height: .52rem;background: url('./images/p3/tipClose.png') no-repeat;background-size: 100% 100%;position: absolute;right: -0.2rem;top: -0.2rem;}





/* p4 */
.p4 img{width: 100%;height: auto;;}
.p4 .saveTxt{width: 2.36rem;height: .33rem;background: url('./images/p4/saveTxt.png') no-repeat;background-size: 100% 100%;margin: auto;margin-top: .3rem;;}
.p4 .savebg{width: 5.68rem;height: 6.66rem;margin: auto;background: url('./images/p4/savebg.png') no-repeat;background-size: 100% 100%;margin-top: .28rem;overflow: hidden;}

.p4 .saveyear{width: 3.44rem;height: .25rem;margin: auto;background: url('./images/p4/2020.png') no-repeat;background-size: 100% auto;margin-top: .36rem;}
.p4 .saveborder{width: 2.98rem;height: 5.25rem;margin: auto;margin-top: .32rem;position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;border-radius: 6px;overflow: hidden;;}
.p4 .saveborder .bg{width: 2.98rem;height: 5.25rem;margin: auto;background: url('./images/p4/saveborder.png') no-repeat;background-size: 100% 100%;position: absolute;top: 0;left: 0;z-index: 10;display: flex;justify-content: center;align-items: center;}
.p4 .saveborder img{width: 98%;}
.p4 .send{width: 3.5rem;height: .74rem;margin: auto;background: url('./images/p4/send.png') no-repeat;background-size: 100% auto;margin-top: .44rem;z-index: 60;;}
.p4 .receive{width: 3.17rem;height: .73rem;margin: auto;background: url('./images/p4/receive.png') no-repeat;background-size: 100% auto;margin-top: .28rem;z-index: 60;}
.p4 .again{width: 2.44rem;height: .70rem;margin: auto;background: url('./images/p4/again.png') no-repeat;background-size: 100% auto;margin-top: .28rem;z-index: 60;}


.p4 .sendMask{width: 6.63rem;height: 11.41rem;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;background: url('./images/p4/mask.png?v=2');background-size: 100% 100%;z-index: 70;}
.p4 .sendMask .sendMaskContent{width: 4.54rem;height: 2.91rem;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
.p4 .sendMask .sendMaskContent .close{width: .52rem;height: .52rem;background: url('./images/p3/tipClose.png') no-repeat;background-size: 100% auto;position: absolute;right: -0.2rem;top: -0.2rem;}
.p4 .qrcode{position: absolute;top: .93rem;left: 0;right: 0;margin: auto;width: 1.95rem;height: 1.95rem;;}


.p4 .saveImg{position: absolute;top: 0;left: 0;z-index: 50;opacity: 0;;}








/* p5 */
.p5 .tips1{width: 6.62rem;height: 1.69rem;margin: auto;background: url('./images/p5/tips1.png') no-repeat;background-size: 100% auto;margin-top: -0.1rem;}
.p5 .gift{width: 5.87rem;height: 8.78rem;margin: auto;background: url('./images/p5/border.png') no-repeat;background-size: 100% auto;margin-top: .14rem;overflow: hidden;display: flex;align-items: center;;}
.p5 .back{width: 1.38rem;height: .57rem;margin: auto;background: url('./images/p5/back.png') no-repeat;background-size: 100% auto;margin-top: .14rem;;}


.p5 .gift .swiper-container{width:4.58rem;height: calc(100% - .33rem - .33rem);margin: auto;}
.p5 .gift .swiper-wrapper{width: 100%;height: 100%;}
.p5 .gift .swiper-slide{width: 100%;height:auto;display: flex;justify-content: space-between;flex-wrap: wrap;}
.p5 .gift .swiper-slide div{width: 2.2rem;height: 2.22rem;background: #fcb441;margin-bottom: .15rem;}
.p5 .gift .swiper-slide div img{width: 100%;height: 100%;object-fit: cover;}





/*---------------------------------------- 15:9 ----------------------*/

/*.screen159  .pic{margin-top: -.8rem;}*/

/*---------------------------------------- 18:9 ----------------------*/
/*.screen189  .btn1{margin:.6rem auto 0;}*/







